<script setup lang="ts">
import { getImage } from "@/api/home";
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import { showToast } from 'vant';
import { ShareSheet } from 'vant';
import router from "@/router";
const iconName: Ref<string> = ref('like-o')
const show = ref(false)
const showShare = ref(false);
interface iImg {
  imgid: number
  price: string
  imgurl: string
  title: string
  city: string

}
const proImage: Ref<iImg[]> = ref([])
const options = ref([
  { name: '微信', icon: 'wechat' },
  { name: '朋友圈', icon: 'wechat-moments' },
  { name: '微博', icon: 'weibo' },
  { name: 'QQ', icon: 'qq' },
])

onMounted(() => {
  getImage().then(res => {
    // console.log(res);
    proImage.value = res.data.data
    // console.log(proImage.value);


  })

});
// 返回的点击事件
function onClickLeft() {
  router.back()
}
// 分享事件
function shareClick() {
  showShare.value = true
}
function likeClick() {
  showToast('收藏成功')

  // iconName = iconName == 'like-o' ? 'like' : 'like-o' 

}
</script>
<template>
  <div class="box">
    <div class="header">
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
          <div>
            <van-icon size="20" @click="likeClick" class="icon" :name="iconName" />
            <!-- <van-icon name="like" color="red" /> -->
        </div>
          <van-icon size="20" @click="shareClick" name="share-o" />
          <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
        </template>
      </van-nav-bar>


    </div>
    <div class="container">
      <!-- 轮播图数据 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in proImage" :key="item.imgid">
          <img :src="item.imgurl" alt="" />
        </van-swipe-item>
      </van-swipe>
    <!-- 介绍部分 -->
      <div class="show">
        <h3>珠海市·整套公寓</h3>
        <h2>精装高层电梯8楼/市中心/金鸡西路</h2>
        <van-button class="btnLeft" type="primary">4.8分</van-button>
        <van-button>近公交站</van-button>
        <van-button>可以做饭</van-button>
        <van-button class="btnleft">可以停车</van-button>
        <van-button>提供早餐</van-button>
      </div>

      <!-- 详情部分
                   -->
      <div class="detail">
        <h3>详情</h3>
        <p class="text">这是一套在珠海中心的整套小屋,白色的设计,周边生活配套齐全,全套侯服务......</p>
        <div class="boxdetail">
          <span>
            <van-icon size="20" name="friends" />
            <p>4位访客</p>
          </span>
          <span>
            <van-icon size="20" name="friends" />
            <p>3间卧室</p>
          </span>
          <span>
            <van-icon size="20" name="friends" />
            <p>3张床</p>
          </span>
          <span>
            <van-icon size="20" name="friends" />
            <p>2间卫生间</p>
          </span>
        </div>

        <!-- 地点部分---------
                     -->
        <div class="place">
          <h3>地点</h3>
          <h3>珠海市,广东省,中国</h3>
          <p>中国广东省珠海市香洲区前山街道金鸡西路000号</p>
          <hr>
          <h3>出行</h3>
          <img src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/房屋详情/u947.png" alt="">
          <div class="placeicon">
            <van-icon size="25" name="location-o" />
            <span>准确位置将在预定后提供</span>
          </div>
        </div>

        <!-- 价格
                     -->
        <div class="price">
          <h3>价格明细：</h3>
          <span>￥1200/晚</span>
        </div>

        <div class="button">
          <van-button class="btn1" @click="$router.push('/chart/chartmsg')">与房东沟通</van-button>
          <van-button @click="$router.push('/detail/confirm')" class="btn2" type="primary">立即预定</van-button>
        </div>

      </div>

    </div>
  </div>
</template>
<style scoped lang="scss">
.van-nav-bar {
  // float: left;
  // position: relative;
  height: 44px;
  //   background-color: skyblue;
  text-align: center;
  line-height: 44px;
}

.van-swipe {
  position: relative;
}

.van-swipe-item img {
  width: 100%;
  height: 300px;
}

.icon {
  margin-right: 15px;
}
</style>
